<template>
  <div id="app">
    <!-- 底部导航 -->
    <footer id="nav" v-if="$route.meta.isturn">
      <router-link
        v-for="(item, index) in nav"
        :key="index"
        :to="item.path"
        style="text-decoration: none"
        ><div class="xx">
          <img :src="item.src" id="iii" class="iii" />
          <p>{{ item.title }}</p>
        </div></router-link
      >
    </footer>
    <router-view />
  </div>
</template>

<style lang="less" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  outline: none;
}
// fixed定位页面滚动出现抖动问题解决
html,
body {
  height: 100%;
  overflow: auto;
  margin: 0;
}
#nav {
  width: 100%;
  position: fixed;
  background-color: #fff;
  height: 55px;
  padding: 3px 0;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  text-align: center;
}
#nav img {
  width: 30px;
}
#nav a {
  color: #6b2828;
  font-size: 14px;
}
</style>

<script>
export default {
  data() {
    return {
      nav: [
        // 底部标签数据
        { src: "../../img/home.png", title: "首页", path: "/Home" },
        { src: "../../img/sort.png", title: "分类", path: "/Sort" },
        { src: "../../img/shopping.png", title: "购物车", path: "/Shopping" },
        { src: "../../img/mine.png", title: "我的", path: "/Mine" },
      ],
      msg: {},
    };
  },
  watch: {
    // $route: function (to, from) {
    //   $(".iii").each(function () {
    //     $(this).attr("src", $(this).attr("src").replace(/_v/gi, ""));
    //   }); //遍历所有img 恢复初始状态
    //   switch (to.path) {
    //     case "/":
    //       this.nav[0].src = "../../img/home_v.png";

    //       break;
    //     case "/Home":
    //       this.nav[0].src = "../../img/home_v.png";
    //       break;
    //     case "/Sort":
    //       this.nav[1].src = "../../img/sort_v.png";
    //       break;
    //     case "/Shopping":
    //       this.nav[2].src = "../../img/shopping_v.png";
    //       break;
    //     case "/Mine":
    //       this.nav[3].src = "../../img/mine_v.png";
    //       break;
    //   }
      
    // },
    $route(to, from) {
      if(to.path === "/" ){
       this.nav[0].src = "../../img/home_v.png";
        this.nav[1].src = "../../img/sort.png";
        this.nav[2].src = "../../img/shopping.png";
        this.nav[3].src = "../../img/mine.png";
      }else if(to.path === "/Home"){
      this.nav[0].src = "../../img/home_v.png";
        this.nav[1].src = "../../img/sort.png";
        this.nav[2].src = "../../img/shopping.png";
        this.nav[3].src = "../../img/mine.png";
      }else if(to.path === "/Sort"){
      this.nav[0].src = "../../img/home.png";
        this.nav[1].src = "../../img/sort_v.png";
        this.nav[2].src = "../../img/shopping.png";
        this.nav[3].src = "../../img/mine.png";
      }else if(to.path === "/Shopping"){
       this.nav[0].src = "../../img/home.png";
        this.nav[1].src = "../../img/sort.png";
        this.nav[2].src = "../../img/shopping_v.png";
        this.nav[3].src = "../../img/mine.png";
      }else if(to.path === "/Mine"){
      this.nav[0].src = "../../img/home.png";
        this.nav[1].src = "../../img/sort.png";
        this.nav[2].src = "../../img/shopping.png";
        this.nav[3].src = "../../img/mine_v.png";
      }
    }
  },
  methods: {},
  mounted() {
    // console.log(this.$axios);
    // this.$axios
    //   .get("http://localhost:3000/data")
    //   .then((data) => {
    //     console.log(data.data);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
  },
 
};
</script>
